<template>
  <div id="app">
    <transition name="slide-fade">
      <el-row v-show="flag">
        <el-col
          :span="24"
          class="header"
        >
          <div class="content-wraper">
            <Menu></Menu>
          </div>
        </el-col>
      </el-row>
    </transition>
    <router-view />
  </div>
</template>

<script>
import Menu from "../src/views/home/components/Menu.vue";
export default {
  name: "App",
  data() {
    return {
      flag: true,
    };
  },
  components: {
    Menu,
  },
  methods: {
    handleScroll(e) {
      // 向下划的滚动事件
      if (e.deltaY < 0) {
        console.log(e);
        this.flag = true;
        return;
      } else if (e.deltaY > 0) {
        this.flag = false;
      }
    },
  },
  mounted() {
    //监听鼠标滚动事件
    window.addEventListener("mousewheel", this.handleScroll);
  },
};
</script>

<style>
.header {
  background-color: #545c64;
  position: fixed;
  top: 0;
  z-index: 999;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>
